14. CSS Variables (Custom Properties)

I. Defining Variables

Explanation: CSS Variables ko -- se define kiya jata hai. Ye variables kisi selector (mostly :root) ke andar declare kiye jaate hain.

<style> :root { --main-color: #ff5733; --padding: 20px; } div { background-color: var(--main-color); padding: var(--padding); color: white; } </style> <div>This uses CSS Variables</div> Run Code

II. Using Variables in Styles

Explanation: Variable ka use var(--name) se kiya jata hai. Aap ise background, font-size, padding, kisi bhi property me use kar sakte hain.

<style> :root { --box-size: 100px; --box-color: #28a745; } .box { width: var(--box-size); height: var(--box-size); background-color: var(--box-color); } </style> <div class="box"></div> Run Code

III. Global vs Local Scope

Explanation: Agar variable :root me define hai to wo global hota hai, matlab poore document me use ho sakta hai. Agar kisi selector ke andar define hai to wo local variable hai.

<style> :root { --color: teal; } .global { color: var(--color); } .local { --color: red; color: var(--color); } </style> <p class="global">This is using global variable</p> <p class="local">This is using local variable</p> Run Code

IV. Theming with Variables

Explanation: CSS Variables ka use themes banane ke liye hota hai. Aap dark mode aur light mode easily toggle kar sakte hain sirf variable values badalkar.

<style> :root { --bg: white; --text: black; } body.dark { --bg: #222; --text: white; } .theme-box { background: var(--bg); color: var(--text); padding: 20px; border-radius: 10px; } </style> <div class="theme-box">Theme Example</div> <script> document.body.classList.add("dark"); </script> Run Code